<template>
    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="用户名" prop="name" required :error="errors.name">
            <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :required="is_create" :error="errors.password">
            <el-input type="password" v-model="form.password" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="name" :error="errors.role">
            <el-radio-group v-model="form.role">
                <template v-for="(role,key) in roles">
                    <el-radio-button :label="key">{{role}}</el-radio-button>
                </template>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :error="errors.email">
            <el-input type="email" v-model="form.email" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">完成</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    const form = {name: null, role: 0, email: null, password: null};
    export default {
        props: {
            userId: Number,
            roles: {
                type: Object,
                default: function () {
                    return {0: '学生', 1: '教师', 2: '管理员'}
                }
            }, type: {
                type: String,
                default: 'create',
                validator(val) {
                    return ['create', 'store', 'new', 'insert', 'put', 'patch', 'edit', 'update'].indexOf(val) !== -1;
                }
            }
        },
        data() {
            return {
                errors: {},
                form,
            }
        }, computed: {
            is_create() {
                return ['create', 'store', 'new', 'insert'].indexOf(this.type) !== -1;
            },
            is_update() {
                return ['put', 'patch', 'edit', 'update'].indexOf(this.type) !== -1;
            }
        }, methods: {
            onSubmit() {
                let promise;
                let success_text;
                switch (this.type) {
                    case 'create':
                    case 'store':
                    case 'new':
                        promise = this.createUserPromise();
                        success_text = '创建用户完成';
                        break;
                    case 'edit':
                    case 'put':
                    case 'patch':
                    case 'update':
                        promise = this.updateUserPromise();
                        success_text = '修改用户[' + this.form.name + ']完成';
                        break;
                }
                promise.then(() => {
                    this.$message.success(success_text);

                    this.$emit('complete');
                }).catch((error) => {
                    switch (error.response.status) {
                        case 422://表单校验失败
                            this.errors = _.mapValues(error.response.data.errors, (item) => {
                                return item.join(' ');
                            });
                            break;
                    }
                })
            }, createUserPromise() {
                return axios.post('users', form);
            }, updateUserPromise() {
                return axios.put('users/' + this.userId, form);
            }, getUser(id) {
                axios.get('users/' + id).then((response) => {
                    this.form.name = response.data.data.name;
                    this.form.email = response.data.data.email;
                    this.form.role = response.data.data.role;
                });
            }
        }, created() {
            if (this.userId) {
                this.getUser(this.userId);
            }
        }
    }
</script>

